<style>
	.display-box {
		background-color: #f7fcff;
		border-radius: 5px;
		font-size: 0.8em;
		height: 23px;
		width: 50px;
		padding-top: 20px;
	}
</style>

<div style="margin: 20px 40px 20px 20px; max-width: 300px">
	<input
		type="text"
		data-decimal="<?= $decimal ?>"
		id="<?= $this->getId('input') ?>"
		name="<?= $name ?>"
		value="<?= e($value) ?>" />
	<div id="<?= $this->getId('input') ?>_val" class="display-box"><?= e($value) ?></div>
	<script>
		var param= {
			decimal: <?php if ($decimal): ?> true <?php else: ?> false <?php endif ?>,
			disable: <?php if ($disable): ?> true <?php else: ?> false <?php endif ?>,
			disableOpacity: <?= $disableOpacity ?>,
			hideRange: <?php if ($hideRange): ?> true <?php else: ?> false <?php endif ?>,
			min: <?= $min ?>,
			max: <?= $max ?>,
			start: <?= $start??$min ?>,
			step: <?= $step??1 ?>,
			vertical: <?php if ($vertical): ?> true <?php else: ?> false <?php endif ?>,
		};
		console.log(param);
		var elem = document.querySelector('#<?= $this->getId("input") ?>');
		var init = new Powerange(elem,param);
		elem.onchange = function() {
			document.getElementById("<?= $this->getId('input') ?>_val").innerHTML = elem.value;
		};
	</script>
</div>